import { nanoid } from 'nanoid'
import { useState, useEffect } from 'react'
import { useAppDispatch, useAppSelector } from '../../app/hooks'
import { savaIndexThemeAsync, themeList } from '../../features/home/homeSlice'
import style from './recommend.module.css'

export default function RecommendType() {
  const recommends = [
    {
      id: nanoid(),
      name: '推荐'
    },
    {
      id: nanoid(),
      theme: 1,
      name: '亲子游'
    },
    {
      id: nanoid(),
      theme: 2,
      name: '聚乐游'
    },
    {
      id: nanoid(),
      theme: 7,
      name: '休闲游'
    },
    {
      id: nanoid(),
      theme: 5,
      name: '康养游'
    },
    {
      id: nanoid(),
      theme: 6,
      name: '研学游'
    }
  ]

  const dispatch = useAppDispatch()
  const themeData = useAppSelector(themeList)

  const [curTheme, setCurTheme] = useState<number | undefined>(undefined)
  useEffect(() => {
    let data
    if (curTheme === undefined) {
      data = {
        pageNum: 1,
        pageSize: 8,
        area: '巴南区'
      }
    } else {
      data = {
        pageNum: 1,
        pageSize: 8,
        area: '巴南区',
        theme: curTheme
      }
    }

    dispatch(savaIndexThemeAsync(data))
  }, [curTheme])

  function toggleType(theme: number | undefined) {
    setCurTheme(theme)
  }
  return (
    <div className={style.recommend}>
      <div>
        <div className={style.title}>巴南好去处</div>
      </div>
      <div className={style['theme-tags']}>
        {recommends.map((r) => (
          <div className={`${style['theme-tag']} ${curTheme === r.theme ? style.active : ''}`} key={r.id} onClick={() => toggleType(r.theme)}>
            {r.name}
          </div>
        ))}
      </div>
      <div className={style['theme-list']}>
        {themeData.map((t) => (
          <div className={style['theme-item']} key={t.id}>
            <div className={style.pic}>
              <img src={t.img} alt="" />
            </div>
            <div className={style['theme-title']}>{t.name}</div>
            <div className={style.distance}>距您&nbsp;{t.distance}&nbsp;km</div>
          </div>
        ))}
      </div>
    </div>
  )
}
